<template>
  <div>
    <div class="filter-container">
      <el-input v-model="listQuery.name" placeholder="姓名" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-select v-permission="['admin']" v-model="listQuery.department" placeholder="部门" clearable style="width: 90px" class="filter-item">
        <el-option v-for="item in department" :key="item" :label="item" :value="item" />
      </el-select>
      <el-select v-model="listQuery.sex" placeholder="性别" clearable class="filter-item" style="width: 130px">
        <el-option v-for="item in sex" :key="item" :label="item" :value="item" />
      </el-select>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="findList">
        查找
      </el-button>



    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="证件照" prop="header" align="center" width="120">
        <template slot-scope="{row}">
<!--          <span><el-avatar fit="scale-down" shape="square" :size="80" :src=row.header></el-avatar></span>-->
          <img :src=row.header width="80px">
        </template>
      </el-table-column>
      <el-table-column label="ID" prop="id" align="center" width="80">
        <template slot-scope="{row}">
          <span>{{ row.personnelId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名" min-width="100px">
        <template slot-scope="{row}">
          <span class="link-type" >{{ row.personnelName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="部门" width="100px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.department }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="{row,$index}">
          <el-button type="primary" size="mini" @click="handleUpdate(row)" >
            Edit
          </el-button>
          <el-button v-if="row.status!='deleted'" size="mini" type="danger" @click="handleDelete(row.personnelId)">
            Delete
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="listQuery.page"
            :page-sizes="[20, 30, 50,500]"
            :page-size="listQuery.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
  </div>
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm"  :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
        <el-form-item label="ID" prop="id">
          <el-input :placeholder='temp.personnelId' v-module.number='temp.personnelId' :disabled="true"></el-input>
        </el-form-item>
        <el-input v-model="temp.header" v-if="true"></el-input>
<!--        http://43.138.43.239:8090/imgUpload-->
<!--        http://localhost:8090/imgUpload-->
<!--              <el-upload class="upload-demo" ref="upload" drag action="http://localhost:8090/imgUpload" multiple-->
          <el-upload class="upload-demo" ref="upload" drag action="http://43.138.43.239:8090/imgUpload" multiple
              :on-success="handleAvatarSuccess">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
              </div>
            </el-upload>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="updateData()">
          提交
        </el-button>
      </div>
    </el-dialog>
    </div>
</template>


<script>
  import {getList,addData,deleteData,fileUp} from '@/api/personnel'
  import request from '@/utils/request'
  export default{
    data(){
      return{
        list:null,
        listLoading:true,
        total: 0,
        dialogFormVisible:false,
        listQuery: {
          page: 1,
          limit: 20,
          department:null,
          sex:null,
          name:null
        },
        department:['产品','管理','运营','市场','技术','行政'],
        sex:['男','女'],
        dialogStatus: '',
        textMap: {
          update: 'Edit',
          create: 'Create'
        },
        img:'',
        dialogPvVisible: false,
        temp:{
          header:''
        }
      }
    },
    created(){
      this.listQuery.department=this.$store.state.department
      this.findList()
    },
    methods:{
      updateData(){
        addData(this.temp).then(response=>{
          this.dialogFormVisible=false
          this.$message({
            message:response.message,
            type:'success'
          })
          this.findList()
        })
        this.findList()
        this.findList()
      },
      handleAvatarSuccess(res, file){
        console.log(res);
        this.temp.header = res;
      },
      findList(){
        this.listLoading = true,
        getList(this.listQuery).then(response=>{
          this.list=response.data.data;
          this.total = response.data.total;
          this.listLoading = false
        })
      },
      resetTemp() {
        this.temp = {
          personnelId: 0,
          img:''
        }
      },
      dateFormat(time) {
                      var date=new Date(time);
                      var year=date.getFullYear();
                      /* 在日期格式中，月份是从0开始的，因此要加0
                       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
                       * */
                      var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
                      var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
                      var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
                      var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
                      var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
                      // 拼接
                      return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
                  },
      handleUpdate(row) {
        this.temp = Object.assign({}, row) // copy obj
        this.dialogStatus = 'update'
        this.dialogFormVisible = true
      },

      handleDelete(id){
        this.$confirm('此操作将永久删除该项, 是否继续?', 'id:'+id, {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteData(id)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        }).finally(()=>{
          this.findList()
        });
      },
      handleSizeChange(val){
        this.listQuery.limit=val
        this.findList()
      },
      handleCurrentChange(val){
        this.listQuery.page=val
        this.findList()
      },
      hanchange(file){
              this.img= URL.createObjectURL(file.raw);
          },
    }

  }
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
